contentTransition#

The contentTransition modifier specifies a transition animation to apply when the content within a single view changes. Unlike view-level transitions (such as .transition(.move)), contentTransition animates changes in content rather than the insertion or removal of the view itself.

This is particularly useful when updating the contents of views like Text, Image, or symbol-based Image(systemName: ...), providing smooth visual feedback on state or data changes.

Type#

1contentTransition?: ContentTransition

Supported ContentTransition Values#

"identity"#

• No animation is applied to the content change.
• The view updates instantly with no visual transition.

1<Text contentTransition="identity">{value}</Text>

"interpolate"#

• The view attempts to interpolate between the old and new content where appropriate.
• Best used with animatable types such as Color, Shape, or View interpolations.

1<Rectangle fill={color} contentTransition="interpolate" />

"opacity"#

• Applies a fade effect: old content fades out while new content fades in.
• Works well with general-purpose views.

1<Text contentTransition="opacity">{message}</Text>

"numericText"#

• Specialized transition for Text views displaying numbers.
• Animates character changes in a way that emphasizes numerical progression.

1<Text contentTransition="numericText">{score}</Text>

"numericTextCountsUp"#

• Similar to "numericText", but optimized for numeric increments.
• Intended for counter-like transitions.

1<Text contentTransition="numericTextCountsUp">{level}</Text>

"numericTextCountsDown"#

• Optimized for numeric decrements.
• Useful for countdowns or decreasing counters.

1<Text contentTransition="numericTextCountsDown">{remainingTime}</Text>

"symbolEffect"#

• Applies a default symbol animation when a symbol image changes.
• Only affects symbol-based images (Image(systemName: ...)) and has no effect on other views.

1<Image
2  systemName={isOn ? "lightbulb.fill" : "lightbulb"}
3  contentTransition="symbolEffect"
4/>

"symbolEffectAutomatic"#

• Uses platform-adaptive symbol animation depending on context.
• Typically provides fade, scale, or morphing effects between symbols.

1<Image
2  systemName={icon}
3  contentTransition="symbolEffectAutomatic"
4/>

"symbolEffectReplace"#

• Replaces the layers of one symbol image with another.
• Provides a more visually fluid symbol swap than abrupt replacement.

1<Image
2  systemName={currentSymbol}
3  contentTransition="symbolEffectReplace"
4/>

"symbolEffectAppear" / "symbolEffectDisappear"#

• Explicit transitions for symbol insertion and removal, respectively.
• These may be combined with visibility-based state changes.

1{isShown
2  ? <Image
3    systemName="checkmark"
4    contentTransition="symbolEffectAppear"
5  />
6  : null}

"symbolEffectScale"#

• Scales the symbol up or down during the content change.
• Works well for symbol emphasis or status feedback.

1<Image
2  systemName={statusIcon}
3  contentTransition="symbolEffectScale"
4/>

Summary#

This modifier is ideal for providing subtle, performant feedback in data-driven UI updates while maintaining view identity and layout stability. It is particularly effective in dashboards, counters, toggles, icon transitions, and numerically dynamic interfaces.